<!doctype html>
<html lang="en-US">
  <head>
    <title>Copy Button Layout: Test copy button layout with fluent theme</title>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@18.3.1",
          "react-dom": "https://esm.sh/react-dom@18.3.1",
          "react-dom/": "https://esm.sh/react-dom@18.3.1/",
          "@fluentui/react-components": "https://esm.sh/@fluentui/react-components?deps=react@18.3.1&exports=FluentProvider,createDarkTheme,webLightTheme"
        }
      }
    </script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script type="module">
      import React from 'react';
      window.React = React;
    </script>
    <script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
    <script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
    <style>
      .fui-FluentProvider {
        display: contents;

        --webchat__color--surface: var(--colorNeutralBackground3);
      }
    </style>
  </head>
  <body>
    <main id="webchat" style="position: relative"></main>
    <script type="module">
      import React from 'react';
      import { createRoot } from 'react-dom/client';
      import { FluentProvider, createDarkTheme, webLightTheme } from '@fluentui/react-components';

      run(async function () {
        const {
          WebChat: { FluentThemeProvider, ReactWebChat }
        } = window;

        const { directLine, store } = testHelpers.createDirectLineEmulator();
        const searchParams = new URLSearchParams(location.search);
        const variant = searchParams.get('variant');
        const theme = searchParams.get('theme');

        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
          features: [
            { name: 'prefers-reduced-motion', value: 'reduce' },
            ...(theme === 'dark' || theme === 'light'
              ? [{ name: 'prefers-color-scheme', value: theme }]
              : [])
          ]
        });

        const styleOptions = {
          botAvatarBackgroundColor: '#304E7A',
          botAvatarImage:
            ''
        };

        const customBrandRamp = {
          10: '#124C32',
          20: '#1A5B3E',
          30: '#216A4A',
          40: '#297956',
          50: '#308861',
          60: '#38976D',
          70: '#40A779',
          80: '#158051',
          90: '#4FC590',
          100: '#56D49C',
          110: '#5EE3A8',
          120: '#79E8B7',
          130: '#94ECC5',
          140: '#AFF1D3',
          150: '#C9F6E2',
          160: '#E4FAF1'
        };

        let fluentTheme;

        if (theme === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
          fluentTheme = createDarkTheme(customBrandRamp);
        } else {
          fluentTheme = {
            ...webLightTheme,
            // Original is #242424 which is too light for fui-FluentProvider to pass our a11y
            colorNeutralForeground1: '#1b1b1b'
          };
        }

        const root = createRoot(document.getElementById('webchat'));

        root.render(
          variant ? 
            React.createElement(
              FluentProvider,
              { theme: fluentTheme },
              React.createElement(
                FluentThemeProvider,
                { variant: variant },
                React.createElement(ReactWebChat, { directLine, store, styleOptions })
              )
            ) :
            React.createElement(ReactWebChat, { directLine, store, styleOptions })
        );

        await pageConditions.uiConnected();

        expect(window.isSecureContext).toBe(true);

        await host.sendDevToolsCommand('Browser.setPermission', {
          permission: { name: 'clipboard-write' },
          setting: 'granted'
        });

        await expect(navigator.permissions.query({ name: 'clipboard-write' })).resolves.toHaveProperty(
          'state',
          'granted'
        );

        await directLine.emulateIncomingActivity({
          // TODO: Attachment is buggy now: clipped into the text content now and not aligned horizontally.
          // attachments: [
          //   {
          //     contentType: 'image/jpeg',
          //     contentUrl:
          //       'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg'
          //   }
          // ],
          entities: [
            {
              '@context': 'https://schema.org',
              '@id': '',
              '@type': 'Message',
              keywords: ['AllowCopy'],
              type: 'https://schema.org/Message',
              citation: [
                {
                  '@id': 'https://bing.com/',
                  '@type': 'Claim',
                  claimInterpreter: {
                    '@type': 'Project',
                    slogan: 'Surfaced with Azure OpenAI',
                    url: 'https://www.microsoft.com/en-us/ai/responsible-ai'
                  },
                  position: '1'
                }
              ]
            }
          ],
          from: {
            name: 'Copilot',
            role: 'bot'
          },
          text: 'Mollit *aute* **aute** dolor[1] ea ex magna incididunt nostrud sit nisi.\n\n[1]: https://bing.com/ "Ex voluptate est dolore"',
          type: 'message'
        });

        await pageConditions.numActivitiesShown(1);

        // WHEN: Wait until the copy button is enabled after permission check.
        const copyButton = document.querySelector(`[data-testid="${WebChat.testIds.copyButton}"]`);

        await pageConditions.became(
          'copy button is enabled',
          () => copyButton.getAttribute('aria-disabled') !== 'true',
          1_000
        );

        // THEN: "Copy" button should appear after the message.
        await host.snapshot('local');
      });

      // TODO: figure out why it fails with copilot image
      window.checkAccessibility = async () => {}
    </script>
  </body>
</html>
